<template>
  <div>
    <!-- 好友/群列表 -->
    <!-- type: 0好友  type: 1群 -->
    <ul class="list-content">
      <li class="list-item" v-for="(item, index) in dataList" :key="index" @click="goUserOrGroupHome(item._id)">
        <div class="user-pic">
          <img :src="$baseUrl + item.imgUrl" alt="">
        </div>
        <!-- 好友 -->
        <div class="list-info" v-if="!listType">
            <div class="user-nick">{{ item.nick }}</div>
            <div class="message-text">
                <img src="@/assets/renzheng.png" alt="">
                个性签名：{{ item.sign }}
            </div>
        </div>
        <!-- 群 -->
        <div class="group-name" v-else>{{ item.groupName }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["dataList", "listType"],
  methods: {
    // 去用户/群主页
    goUserOrGroupHome(id) {
      // 0 好友主页  1 群主页
      if (!this.listType) {
        this.$router.push({
          path: '/userhome',
          query: {
            _id: id
          }
        })
      } else {
        this.$router.push({
          path: '/grouphome',
          query: {
            _id: id
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.list-content {
  width: 100%;
  .list-item {
    width: 100%;
    height: 1.8rem;
    display: flex;
    align-items: center;
    .user-pic {
      width: 1.2667rem;
      height: 1.2667rem;
      border-radius: 50%;
      margin-right: 0.2667rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .list-info, .group-name {
      flex: 1;
      max-width: 7.6rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 1.2667rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .user-nick {
        font-size: 0.4rem;
      }
      .message-text {
        max-width: 7.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.3333rem;
        display: flex;
        align-items: center;
        img {
            width: .4rem;
            height: .4rem;
            margin-right: .0667rem;
        }
      }
    }
    .group-name {
        font-size: 0.4rem;
    }
  }
}
.friend-state {
  padding: .2rem .2667rem;
  border-radius: .0667rem;
}
.is-friend {
  background-color: #f8be45;
}
.no-friend {
  background-color: #d5e8f3;
  color: #2a89f6;
}
</style>
